<template>
  <div style="position: relative">
    <el-dialog center :visible.sync="deflag" title="确认删除" width="30%">
      <div slot="footer" class="dialog-footer" style="width: 100%;display: flex;justify-content: space-between">
        <el-button @click="deflag = false">取 消</el-button>
        <el-button type="primary" @click="DelThis">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="XQFlag" title="详情" width="30%" center>
      <p><strong>已分配老师</strong></p>
      <el-table width="100%" :data="XQList" style="margin-bottom: 2vh">
        <el-table-column label="序号"  align="center">
          <template slot-scope="scope">
            {{scope.$index+1}}
          </template>
        </el-table-column>
        <el-table-column label="姓名"  align="center">
          <template slot-scope="scope">
            {{XQUsers[scope.$index].name}}
          </template>
        </el-table-column>
        <el-table-column label="角色"  align="center" prop="type">
        </el-table-column>
        <el-table-column label="评分占比"  align="center" prop="percent">
        </el-table-column>
      </el-table>
      <p><strong>分配老师</strong></p>
      <el-form label-width="80px" style="width: 100%">
        <el-form-item label="老师" style="width: 100%">
          <el-autocomplete
            class="inline-input"
            v-model="XQText"
            :fetch-suggestions="querySearch"
            @select="XQSelect"
            placeholder="请输入评卷老师"
            style="width: 100%"
          ></el-autocomplete>
        </el-form-item>
        <el-form-item label="角色" prop="type" style="width: 100%">
          <el-select placeholder="请选择角色" style="width: 100%" v-model="XQUser.type">
            <el-option label="指导老师" value="指导老师" v-if="LastFlag().flag1"></el-option>
            <el-option label="评阅老师" value="评阅老师" v-if="LastFlag().flag2"></el-option>
            <el-option label="答辩老师" value="答辩老师" v-if="LastFlag().flag3"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
        <div slot="footer" class="dialog-footer" style="width: 100%;display: flex;justify-content: space-between">
          <el-button @click="XQFlag=false">取 消</el-button>
          <el-button type="primary" @click="SaveAll">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogVisible" title="评分" width="30%" center>
      <el-form label-width="80px">
        <el-form-item label="评分">
          <el-input v-model="form.num" placeholder="请输入评分"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="width: 100%;display: flex;justify-content: space-between">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveRating">确 定</el-button>
      </div>
    </el-dialog>
    <el-table width="100%" height="70vh" :data="List">
      <el-table-column label="序号" align="center">
        <template slot-scope="scope">
          {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="下载链接" prop="url" align="center"></el-table-column>
      <el-table-column label="描述" prop="remark" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="info" size="mini" @click="GetUrl(scope.row.url)">预览</el-button>
          <el-button type="primary" size="mini" v-if="RateList.length > 0 && judge1(scope.$index)"
                     @click="showRatingDialog(scope.row)"
          >评分
          </el-button>
          <el-button type="success" size="mini" v-if="judge()" @click="ShowXQ(scope.row)">详情</el-button>
          <el-button type="danger" size="mini" v-if="judge()" @click="ShowDel(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <center>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </center>
  </div>
</template>

<script>
import { GetList, GetUrl, Remove } from '@/api/opus'
import { SaveRate } from '@/api/rate'
import { GetXQUsers, SaveUser } from '@/api/user'
import { GetUserRate, SaveUserRate } from '@/api/userRate'

export default {
  name: 'Opus',
  data() {
    return {
      dialogVisible: false,
      dialogTitle: '',
      List: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      RateList: [],
      id: '',
      XQ:{},
      XQUser:{},
      XQList:[],
      XQFlag:false,
      XQForm: {

      },
      XQText:"",
      XQUsers:[],
      deflag: false,
      form: {
        id: null,
        uid: '',
        oid: '',
        num: ''
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    ShowXQ(item){
      this.XQ=item;
      this.XQFlag=true;
      GetUserRate(item.id).then(res=>{
        console.log(res)
        this.XQUsers=res.UserList
        this.XQList=res.userRateList
        console.log(this.XQList)
      })
    },
    XQSelect(e){
      console.log(e)
      this.XQUser=e.address
    },
    SaveAll(){
      SaveUserRate(
        {
          id:null,
          oid:this.XQ.id,
          uid:this.XQUser.id,
          type:this.XQUser.type,
          percent:null,
          israte:0
        }
      ).then(res=>{
        console.log(res)
        this.XQUser={}
        this.XQText=""
      })
      this.$message.success("成功保存")
      this.XQFlag=false
    },
    querySearch(queryString, cb) {
      let that=this
      var s
      if(this.XQText!=="") {
        GetXQUsers(this.XQText).then(res => {
          console.log(res)
          var s = []
          res.userList.forEach(i => {
            s.push({
              value: i.name, address: i
            })
          })
          cb(s);
        })
      }
    },
    judge() {
      return localStorage.getItem('role') === '管理员'
    },
    judge1(index) {
      console.log(this.RateList[index])
      for (let i = 0; i < this.RateList[index].length; i++) {
        if (Number(this.RateList[index][i]) === Number(localStorage.getItem('uid'))) {
          return false
        }
      }
      return ['老师'].includes(localStorage.getItem('role'))
    },
    getList() {
      const params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        uid: Number(localStorage.getItem('uid'))
      }
      GetList(params).then(res => {
        this.List = res.opusPage
        this.total = res.total
        this.RateList = res.RateList
      })
    },
    LastFlag(){
      var s={
        flag1:true,
        flag2:true,
        flag3:true
      }
      var a=0,b=0,c=0
      for (let i = 0; i < this.XQList.length; i++) {
            if(this.XQList[i].type==='指导老师'){
              a++;
            }else if(this.XQList[i].type==='评阅老师'){
              b++;
            }else if(this.XQList[i].type==='答辩老师'){
              c++;
            }
      }
      if(a===1){
        s.flag1=false
      }
      if(b===1){
        s.flag2=false
      }
      if(c===3){
        s.flag3=false
      }
      return s
    },
    GetUrl(url) {
      GetUrl({ 'url': url }).then(res => {
        window.open(res.url, '_blank')
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getList()
      this.$message.success("已修改")
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
    },
    DelThis() {
      let that = this
      Remove(this.id).then(() => {
        that.currentPage = 1
        that.getList()
        that.deflag = false
        this.$message.success("删除成功")
      })
    },
    ShowDel(id) {
      this.id = id
      this.deflag = true
    },
    showRatingDialog(it) {
      console.log(localStorage.getItem('uid'))
      this.form.oid = it.id
      this.form.uid = localStorage.getItem('uid')
      this.dialogVisible = true
      // Set any additional data you need to submit along with rating here
    },
    saveRating() {
      // Here you can handle the save logic, e.g., make an API call to submit the rating
      console.log('Saving rating:', this.num)
      // After saving, you might want to close the dialog
      let that = this
      console.log(this.form)
      SaveRate(this.form).then(() => {
        that.dialogVisible = false
        that.currentPage = 1
        that.getList()
        this.$message.success("评分成功")
      })
      // You can also refresh the table data if needed
    }
  }
}
</script>

<style scoped lang="scss">
.avatar-uploader {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 150px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  overflow: hidden;
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
}
</style>
